<script setup>
import Result from "@/components/Result/index.vue";
import {onMounted, ref} from 'vue'
import RedPackageRain from "@/components/RedPackageRain/index.vue";
import RedPackage from "@/components/RedPackage/index.vue";
const app=ref(null)
const state=ref({
  isStart:false,
  isShowRain:false,
  isClose:false

})

onMounted(()=>{
})
function onClickRedPackage(){
}

function onFinishRain(){
  console.log("结束抽奖")
  state.value.isShowRain=false
}

function onStartRain(){

}

function onStart(){
  console.log("开始抽奖")
  state.value.isStart=true
  state.value.isShowRain=true
  state.value.isClose=false
}

function onClose(){
  state.value.isClose=true
  state.value.isStart=false
  state.value.isShowRain=false
}
</script>

<template>
  <div class="app" ref="app">
    <template v-if="!state.isStart">
      <button @click="onStart">点击开始</button>
    </template>
    <RedPackageRain v-if="!state.isClose&&state.isShowRain" @onClickRedPackage="onClickRedPackage" :speed="50" :duration="100000" :down-duration="2000" @onStartRain="onStartRain" @onFinishRain="onFinishRain"/>
    <template  v-if="state.isStart&&!state.isClose&&!state.isShowRain">
        <Result :amount="100"></Result>
        <div style="position:fixed;top:0;right: 0">
          <button @click="onClose">关闭</button>
        </div>
    </template>
  </div>
</template>

<style scoped>
  .app{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
